<template>
  <div class="strut-div">
    <div class="mt-card">
      <!-- <tg-map></tg-map> -->
    </div>
    <div class="mb-card">
      <div class="card-item" style="height: 336px; ">
        <p class="card-title">居民收入</p>
        <div class="card-div"><common-bar-chart ref="peopleIncome" :config="peopleIncomeConfig"></common-bar-chart></div>
      </div>
    </div>
  </div>
</template>

<script>
  import {peopleIncomeBarChart,colorList} from '@/network/tg-fake-data.js';
  import CommonBarChart from '@/components/common/common-bar-chart.vue';
  import TgMap from './tg-map.vue';

  export default {
    components: {
      CommonBarChart,
      TgMap
    },
    data() {
      return {
        peopleIncomeConfig:{
          option: {
            id: 'peopleIncome',
            xAxis: [],
            y: []
          }
        },
        peopleIncomeBarChart:JSON.parse(JSON.stringify(peopleIncomeBarChart)),
      }
    },
    mounted() {
      this.initPeopleIncomeBar();
    },
    methods: {
      initPeopleIncomeBar() {
        this.peopleIncomeBarChart.source[0].splice(0, 1)
        var type = this.peopleIncomeBarChart.source[0];

        this.peopleIncomeBarChart.source.forEach((item,index) => {
          if (index > 0) {
            this.peopleIncomeConfig.option.xAxis.push(this.peopleIncomeBarChart.source[index].splice(0, 1));
          }
        });

        this.peopleIncomeBarChart.source.shift()

        type.map((item, index) => {
          var bar = {
            title: item,
            data: this.peopleIncomeBarChart.source.map(val => val[index]),
            color: colorList[index],
            stack:index,
            position: 'top'
          };
          if (index == 0) {
            bar.axis = {
              min: 0,
              max: 0,
              name: '单位(亿元)'
            };
          }

          this.peopleIncomeConfig.option.y.push(bar);

        });
        this.$refs.peopleIncome.initChart();


      }
    },
  }
</script>

<style scoped lang="scss" type="text/scss">
.mt-card {
  width: 100%;
  height: 635px;
  position: relative;
  // background: url(../../../assets/imgs/tg/middle-card.png) no-repeat;
}

.mb-card {
  margin-top: 20px;
  .card-item {
    width: 100%;
  }
}


</style>
